<script setup>
import Selector from "@/components/QuestionSelector.vue";
import { reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { getQuestionListService, deleteQuestionService } from "@/api/questions";
import QuestionDrawer from "@/components/QuestionDrawer.vue";

const loading = ref(false);

const params = reactive({
  pageNum: 1,
  pageSize: 10,
  title: "",
  difficulty: "",
});

const questionList = ref([]);
const total = ref(0);
async function getQuestionList() {
  loading.value = true;
  try {
    const result = await getQuestionListService(params);
    console.log("API响应:", result);

    questionList.value = result.rows;
    total.value = result.total;

    // 调试信息
    console.log("当前参数:", { ...params });
    console.log("总记录数:", result.total);
    console.log("当前页数据量:", result.rows.length);
  } catch (error) {
    console.error("获取题目列表失败:", error);
    ElMessage.error("获取题目列表失败");
  } finally {
    loading.value = false;
  }
}
getQuestionList();
function handleSizeChange(newSize) {
  params.pageSize = newSize;
  params.pageNum = 1;
  getQuestionList();
}

function handleCurrentChange(newPage) {
  params.pageNum = newPage;
  getQuestionList();
}

function onSearch() {
  params.pageNum = 1;
  getQuestionList();
}

function onReset() {
  params.pageNum = 1;
  params.pageSize = 10;
  params.title = "";
  params.difficulty = "";
  getQuestionList();
}
const questionDrawerRef = ref(null);
// 添加问题
const onAddQuestion = () => {
  questionDrawerRef.value.open();
};

// 编辑问题
const onEdit = (questionId) => {
  questionDrawerRef.value.open(questionId);
};

// 删除问题
const onDelete = async (questionId) => {
  try {
    // 显示确认对话框
    await ElMessageBox.confirm(
      "确定要删除该题目吗？删除后不可恢复！",
      "删除确认",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }
    );

    // 用户确认删除，调用删除API
    await deleteQuestionService(questionId);
    ElMessage.success("删除成功");

    // 重新加载题目列表
    await getQuestionList();
  } catch (error) {
    // 用户取消删除或其他错误
    if (error !== "cancel") {
      console.error("删除失败:", error);
      ElMessage.error("删除失败，请重试");
    }
  }
};

// 处理抽屉组件的成功事件
const handleDrawerSuccess = (type) => {
  if (type === "add" || type === "edit") {
    // 添加或编辑成功后，重新加载题目列表
    getQuestionList();
  }
};
</script>

<template>
  <div class="question-manage">
    <div class="header">
      <h2>题目管理</h2>
      <el-button type="primary" @click="onAddQuestion">添加题目</el-button>
    </div>

    <!-- 搜索表单区域 -->
    <div class="search-form">
      <el-form :inline="true">
        <el-form-item>
          <selector
            v-model="params.difficulty"
            placeholder="请选择题目难度"
            style="width: 200px"
          ></selector>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="params.title"
            placeholder="请您输入要搜索的题目标题"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table height="526px" :data="questionList" v-loading="loading">
      <el-table-column prop="questionId" width="180px" label="题目id" />
      <el-table-column prop="title" label="题目标题" />
      <el-table-column prop="difficulty" label="题目难度" width="90px">
        <template #default="{ row }">
          <div v-if="row.difficulty === 1" style="color: #3ec8ff">简单</div>
          <div v-if="row.difficulty === 2" style="color: #fe7909">中等</div>
          <div v-if="row.difficulty === 3" style="color: #fd4c40">困难</div>
        </template>
      </el-table-column>
      <el-table-column prop="createName" label="创建人" width="140px" />
      <el-table-column prop="createTime" label="创建时间" width="180px" />
      <el-table-column label="操作" width="150px" fixed="right">
        <template #default="{ row }">
          <el-button
            type="primary"
            link
            @click="onEdit(row.questionId)"
            class="action-btn"
            >编辑</el-button
          >
          <el-button
            type="danger"
            link
            @click="onDelete(row.questionId)"
            class="action-btn"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <div class="pagination-container">
      <el-pagination
        background
        size="small"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        v-model:current-page="params.pageNum"
        v-model:page-size="params.pageSize"
        :page-sizes="[1, 5, 10, 15, 20]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 添加题目抽屉组件 -->
    <QuestionDrawer ref="questionDrawerRef" @success="handleDrawerSuccess" />
  </div>
</template>

<style lang="scss" scoped>
.question-manage {
  padding: 20px;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h2 {
      margin: 0;
      color: #2a6fc7;
    }
  }

  .search-form {
    margin-bottom: 16px;
    padding: 16px;
    background-color: #f0f2f5;
    border-radius: 6px;

    .el-form {
      margin-bottom: 0;
    }

    .el-form-item {
      margin-right: 16px;
      margin-bottom: 0;
    }

    .el-input__wrapper {
      border-radius: 4px;
    }
  }

  :deep(.el-table) {
    --el-table-header-bg-color: #2a6fc7;
    --el-table-header-text-color: #ffffff;
    --el-table-border-color: #e4e7ed;

    .el-table__header-wrapper {
      .el-table__header {
        th {
          font-weight: normal;
          background-color: #2a6fc7;
          color: #ffffff;
        }
      }
    }

    .el-table__body {
      tr {
        height: 48px;
      }

      td {
        padding: 8px 0;
        color: #303133;
      }
    }

    .action-btn {
      margin-right: 8px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .el-pagination {
    margin-top: 20px;
    justify-content: flex-end;

    .el-pager li.is-active {
      background-color: #2a6fc7 !important;
    }
  }

  .el-button--text {
    color: #2a6fc7 !important;

    &.red span {
      color: #fd4c40;
    }
  }

  .pagination-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style>
